<template>
  <div class="bod">
    <div class="top">
      <create-exam-bar></create-exam-bar>
    </div>
      <el-card  shadow="hover" class="box-card">
        <div class="fen">
        <span class="share">分享链接</span>
        <span class="title">项目分享</span>
        <span class="tip">（项目发布后，链接与二维码始终不变）</span>
        <div>
          <el-input class="inp"   :placeholder="urlPC"/>
          <el-button class="btnf copy-code-button"  :data-clipboard-text="urlPC" @click="copy">复制</el-button>
          <el-button class="btnd" @click="PCexam">打开</el-button>
        </div>
          <div class="qr">
            <span class="saoma">扫码分享答题页</span>
            <div class="QRcode">
              <vue-qr class="vueqr"  :text="urlPhone" color-dark="black" />
            </div>
            <span class="load">下载二维码</span>
          </div>
        <el-button class="stop" @click="stopPublish">暂停发布</el-button>
        </div>
        <div class="phone">
          <div class="yin"><div class="one"></div><div class="two"></div></div>
          <div class="screen">
            <iframe :src="urlPhone"  scrolling="auto"   frameborder="0" width="254px" height="420px"></iframe>
          </div>
          <div class="scroll">
          </div>
        </div>
      </el-card>
  </div>
</template>

<script>
  import Clipboard from 'clipboard'
  import VueQr from 'vue-qr'
import CreateExamBar from "@/components/navigation/CreateExamBar";
export default {
  name: "PublishProject",
  data(){
    return {
      listQ:'',
        urlPhone:'',
      urlPC:''
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    CreateExamBar,
    VueQr,
  },
  computed: {
    getExamId(){
      return this.$store.state.examId;
    }
  },
  watch: {
  },
  created(){
    this.getQuestions();
    this.getUrl();
  },
  methods: {
    stopPublish(){
      this.$confirm('你要暂停发布此试题吗?', '暂停发布确认', {
        confirmButtonText: '暂停发布',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        var  id = this.getExamId;
        this.$axios.post('exam/update',
                {
                  id: id,
                  status: 0,
                }).then(res => {
          console.log(res);
        });
        this.$message({
          showClose: true,
          message: '试题已暂停发布！',
          type: 'success'
        });
        this.$router.push("/Mine");
      }).catch(() => {
        this.$message({
          showClose: true,
          message: '已取消此操作！',
          type: 'info'
        });
      });
    },
    copy(){
      var clipboard = new Clipboard('.copy-code-button')
      clipboard.on('success', e => {
        console.log('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log('不支持此功能')
        clipboard.destroy()
      })
    },
    getUrl(){
      var  id = this.getExamId;
      this.urlPhone = 'http://localhost:8081/#/Phone/'+ id
      this.urlPC = 'http://localhost:8081/#/PC/'+ id
      console.log("urlPhone"+this.urlPhone);
      console.log("urlPC"+this.urlPC);
    },
      getQuestions(){
        this.$axios.post('exam/showQuestions',{
          id: this.getExamId
        }).then(res => {
          console.log("777");
          console.log(res.data);
          this.listQ = res.data;
          this.$store.commit("getListQ", {
            listQ: this.listQ
          })
        })
      },
    PCexam(){//打开
       var  id = this.getExamId;
          this.$router.push({
              path:`/PC/${id}`
          });
    }
  }
}
</script>

<style scoped>
  .bod {
    position: relative;
    background-color: RGB(243,245,246);
    height: 700px;
  }
.box-card{
  position: relative;
  box-sizing: border-box;
  width: 1200px;
  height: 600px;
  padding: 20px 15px;
  margin: 15px auto;
}
  .title, .tip{
    display: inline-block;
    margin-top: 13px;
    margin-bottom: 15px;
  }
  .title{
    font-size: 16px;
    color: RGB(72,72,72);
  }
  .tip{
    font-size: 12px;
    color: #aaa;
  }
  .share{
    display: block;
    font-size: 17px;
    color: RGB(72,72,72);
    margin-bottom: 15px;
  }
  .inp {
    display: inline-block;
    width: 320px;
    height: 40px;
    background-color: RGB(247,248,250);
    outline: none;
    border-right: 0;
  }
  .btnf {
    margin-left: 2px;
    background-color: RGB(179,192,209);
  }
  .btnd {
    margin-left: 10px;
    background-color: white;
  }
  .btnf, .stop:hover{
    color: RGB(243,245,246);
  }
  .btnd:hover {
    color: RGB(179,192,209);
  }
  .qr {
    box-sizing: border-box;
    display: block;
    height: 200px;
    width: 470px;
    padding-left: 40px;
    padding-top: 20px;
    margin-top: 50px;
    border-top: 1px dashed RGB(179,192,209);
  }
  .QRcode {
    width: 120px;
    height:120px;
  }
  .saoma{
    display: inline-block;
    width: 120px;
    color: #aaa;
    font-size: 12px;
    text-align: center;
  }
  .vueqr{
      width: 120px;
      height: 120px;
  }
  .load {
    color: RGB(38,136,255);
    font-size: 13px;
    display: inline-block;
    width: 120px;
    text-align: center;
  }
  .stop{
    display: block;
    background-color: RGB(179,192,230);
    margin-top: 20px;
    margin-left: 44px;
  }
  .examSet{
    position: absolute;
    top: 60px;
    left: 0;
    width: 220px;
    height: 900px;
  }
  .tiSet {
    display: block;
    margin: 10px 10px 10px 0;
  }
  .top {
    background-color: RGB(179,192,209);
    padding: 0 30px;
  }
  .fen {
    width: 600px;
    height: 600px;
    border-right: 1px dashed RGB(225,231,242);
  }
  .phone{
    position: absolute;
    top: 25px;
    right: 100px;
    height: 550px;
    width: 290px;
    border-radius: 38px;
    border: 1px solid RGB(245,245,245);
    background-color: RGB(255,255,255);
    box-shadow: 0 0 20px RGB(234,234,234);
  }
  .screen {
    width: 254px;
    height: 420px;
    margin: 12px auto;
    border: 2px solid RGB(203,203,203);
    border-radius: 2px;
    overflow: scroll;
  }
  .screen::-webkit-scrollbar{
    display: none;
  }
  .yin {
      margin: 23px auto;
      width: 70px;
      height: 10px;
  }
    .one{
        float: left;
        width: 6px;
        height: 5px;
        border-radius: 5px;
        background-color: RGB(217,217,217);
    }
    .two{
        float: right;
        width: 55px;
        height: 5px;
        border-radius: 5px;
        background-color: RGB(217,217,217);
    }
  .scroll {
    width: 45px;
    height: 45px;
    margin: auto;
    border-radius: 30px;
    border: 3px solid RGB(217,217,217);
  }
  .index{
    width: 254px;
    height: 420px;
    background-color: RGB(241,242,242);
  }
</style>
